<template>
  <div class="rank">
    <van-tabs v-model="active" scrollspy sticky background="whitesmoke">
      <van-tab title="官方">
        <selected-rank />
      </van-tab>
      <van-tab title="精选">
        <offcial-rank />
      </van-tab>
      <van-tab title="曲风">
        <genre-rank />
      </van-tab>
      <van-tab title="全球">
        <global-rank />
      </van-tab>
      <van-tab title="特色">
        <characteristic-rank />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
//引入签页对应子组件
import offcialRank from "./components/officialRank.vue";
import selectedRank from "./components/selectedRank.vue";
import genreRank from "./components/genreRank.vue";
import globalRank from "./components/GlobalRank.vue";
import characteristicRank from "./components/characteristicRank.vue";

export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    offcialRank,
    selectedRank,
    genreRank,
    globalRank,
    characteristicRank,
  },
};
</script>
<style scoped>
.rank {
  background-color: whitesmoke;
}
</style>